<template>
  <div>
    <Title :title="title"></Title>
    <!-- 1.提供图表容器  ref模板引用 类似于id  -->
    <div ref="bottom1" style="height: 150px;margin-top: 10px;"></div>
  </div>
</template>
<script>
// 2.引入折线图构造函数 
import { Column } from '@antv/g2plot';
// 引入get请求 @表示src别名 
import { get } from '@/utils/request';
// 引入momentjs
import moment from 'moment';
// import axios from 'axios';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      title: '服务事项概览',
      params: {
        page: 1,
        pageSize: 100
      },
      // 存放温度数据
      serdata: [],
      // 创建一个图表实例 
      column: null
    }
  },
  computed: {
    ...mapState(['ed'])
  },
  // 侦听器 侦听数据 
  watch: {
    ed: {
      handler(n, o) {
        this.params.engineer_id = n.engineer_id;
        this.params.device_id = n.device_id;
        this.getSerData();
        this.column.changeData(this.serData);
      },
      deep: true
    }
  },
  methods: {
    // 封装加载折线图图表函数 
    loadColumn() {
      const data = [
        {
          type: '家具家电',
          sales: 38,
        },
        {
          type: '粮油副食',
          sales: 52,
        },
        {
          type: '生鲜水果',
          sales: 61,
        },
        {
          type: '美容洗护',
          sales: 145,
        },
        {
          type: '母婴用品',
          sales: 48,
        },
        {
          type: '进口食品',
          sales: 38,
        },
        {
          type: '食品饮料',
          sales: 38,
        },
        {
          type: '家庭清洁',
          sales: 38,
        },
      ];
      const columnPlot = new Column(this.$refs.bottom1, {
        data: this.serData,
        xField: 'type',
        yField: 'value',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: true,
            autoEllipsis: true
          },
        },
        meta: {
          type: {
            alias: '类别',
          },
          value: {
            alias: '数量',
          },
        },
      });
      columnPlot.render();
    },
    // 封装方法获取后端接口的实时数据 
    async getSerData() {
      let res = await get('dashboard/queryEngineerBindDeviceNumber');
      this.serData = res.data;
    }
  },
  // 最早获取dom元素的生命周期  图表渲染dom元素
  async mounted() {
    await this.getSerData();
    this.loadColumn();
  }
}
</script>
<style long="less" scoped></style>